iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

輕鬆Vue一下系列 第 9

Day9-v-bind(Class)

  • 分享至 

  • xImage
  •  

v-bind在vue中是一個可以用來處理css內容的屬性,它可以使用陣列的格式來處理欲使用的class,有時會簡寫成:class
https://ithelp.ithome.com.tw/upload/images/20190925/20112076WN8lpEqZBS.jpg
利用v-bind在網頁中的div上控制activetext-danger兩個類別,而這兩個類別則因isActivehasError的值有所不同
https://ithelp.ithome.com.tw/upload/images/20190925/20112076r7G1cVA3lf.jpg
透過在javascript中的撰寫,使得isActivetrue;hasErrorfalse
https://ithelp.ithome.com.tw/upload/images/20190925/20112076UybgDT5jxn.jpg
因此,在網頁中text-danger這類別並不會被套用到div上。
明日預告: v-bind(style)


上一篇
Day8-事件處理v-on:click
下一篇
Day10- v-bind(style)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言